<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .ad{
            width: 10px;
            height: 10px;
        }
        .yuan{
            border-radius: 50px;
            width: 10px;
            height: 10px;
        }
        .jianjie{
            width: 20ex;
            height: 50px;
        }
    </style>
</head>
<div>用户名 <input type="text"></div>
 <div>&nbsp;&nbsp;&nbsp;密码 <input type="text"></div>
 <div>&nbsp;&nbsp;&nbsp;性别 <input type="text" value="男"></div>
 <div>&nbsp;&nbsp;&nbsp;爱好:
    <input type="text"  class="ad">&nbsp;篮球
    <input type="text"  class="ad">&nbsp;足球
    <input type="text"  class="ad">&nbsp;羽毛球
    <input type="text"  class="ad">&nbsp;乒乓球
    <input type="text"  class="ad">&nbsp;爬山
    <input type="text"  class="ad">&nbsp;购物
    <input type="text"  class="ad">&nbsp;旅游
    <input type="text"  class="ad">&nbsp;美女
 </div>
 <div>是否已婚:
     <input type="text" class="yuan">已婚
     <input type="text" class="yuan">未婚
</div>
<div>&nbsp;&nbsp;&nbsp;简介: <input type="text" class="jianjie"></div>

<body>
    <script>
        var arr = [{
            label: "用户名",
            name: "username",
            type: "text"
        }, {
            label: "密码",
            name: "password",
            type: "password"
        }, {
            label: "性别",
            name: "gender",
            type: "select",
            options: ['男', '女', '不男', '不女', 'Gay', '妖王']
        }, {
            label: "爱好",
            name: "hobby",
            type: "checkbox",
            options: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']
        }, {
            label: '是否已婚',
            name: 'married',
            type: 'radio',
            options: ['已婚', '未婚']
        },
        {
            label: '简介',
            name: 'resume',
            type: 'textarea'
        }];
    </script>
</body>
</html>